<template>
	<el-dialog
		:visible.sync="evalDialog"
		width="800px"
		class="evalDialog">
		<h3 class="title"><span></span>{{options.title}}</h3>
		<el-form :model="ruleFormOne" :rules="rulesOne" ref="ruleFormOne" label-width="120px" class="demo-ruleForm" v-if="options.level === '10'">
			<el-form-item label="线下门店名称" prop="branchName">
				<el-input v-model="ruleFormOne.branchName" placeholder="请填写"></el-input>
			</el-form-item>
			<el-form-item label="负责人手机号" prop="principalPhone">
				<el-input v-model="ruleFormOne.principalPhone" placeholder="请填写"></el-input>
			</el-form-item>
			<p class="demo-ruleForm__tips">* 务必填写门店负责人注册发才网并通过认证的手机号</p>
			<el-form-item label="负责人姓名" prop="principalName">
				<el-input :disabled="forbidden" v-model="ruleFormOne.principalName" placeholder="请填写"></el-input>
			</el-form-item>
			<el-form-item label="门店区域" prop="region" class="ruleForm-area">
			  <city-Cascader
				:citys="ruleFormOne.citys"
				:level="level" :notRequire='ruleFormOne.reset'
				@handleChange="handleCityChange" :clearable="isClear"
			  ></city-Cascader>
			</el-form-item>
			<el-form-item label="具体地址" prop="adress">
				<el-input v-model="ruleFormOne.adress" placeholder="请填写"></el-input>
			</el-form-item>
			<el-form-item label="设置负责人账户" prop="principalAccount">
				<el-input :disabled="forbidden" v-model="ruleFormOne.principalAccount" placeholder="请填写"></el-input>
			</el-form-item>
			<p class="demo-ruleForm__tips">{{passwordTips}}</p>
			<div class="demo-ruleForm__checkbox">
				<h3 class="demo-ruleForm__checkbox__title">辅导站测评权限</h3>
				<el-checkbox-group v-model="ruleFormOne.assessment" class="stepone-checkbox">
					<template v-for="(assessment,index) in checkboxList">
						<el-checkbox :key="assessment.label" :label="assessment.label" border size="medium">{{assessment.jobName}}</el-checkbox>
					</template>
				</el-checkbox-group>
			</div>
		</el-form>
		<el-form :model="ruleFormTwo" :rules="rulesTwo" label-width="150px" class="demo-ruleForm" v-else>
			<el-form-item label="后台工作人员姓名" prop="staffName">
				<el-input v-model="ruleFormTwo.staffName" placeholder="请填写"></el-input>
			</el-form-item>
			<el-form-item label="后台工作人员手机号" prop="staffPhone">
				<el-input v-model="ruleFormTwo.staffPhone" placeholder="请填写"></el-input>
			</el-form-item>
			<el-form-item label="设置负责人账户" prop="staffAccount">
				<el-input v-model="ruleFormTwo.staffAccount" placeholder="请填写"></el-input>
			</el-form-item>
			<p class="demo-ruleForm__tips">* 账号密码为admin@123，请负责人登录账户并及时修改密码防止密码泄露</p>
		</el-form>
		<div class="form-sub">
			<el-button class="examine-dag" @click="close">返回</el-button>
			<el-button type="danger" class="examine-suc" @click="submsg">确定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import cityCascader from "../../component/cityCascader/index.vue";	
import cityData from "../../assets/citys.json";
export default{
	components:{
		cityCascader
	},
	props:{
		options:{
			type:Object,
			require:true
		}
	},
	data(){
		var validateTel = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('手机号码不能为空！'));
			}else if(!(/^1[3456789]\d{9}$/.test(value))){
				return callback(new Error('手机号码有误，请重新填写！'));
			}else{
				let params = {};
				if(this.options.level === '10'){
					params.principalPhone = this.ruleFormOne.principalPhone;
				}else{
					params.principalPhone = this.ruleFormTwo.staffPhone;
				}
				this.$houseAxios.post('/housekeeping/Branch/selectPrincipalPhone',params).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						if(res.data.data.principalAccount != undefined){
							if(this.options.level === '10'){
								this.ruleFormOne.principalAccount = res.data.data.principalAccount;
								this.ruleFormOne.principalName = res.data.data.principalName;
								this.forbidden = true;
								this.passwordTips = '此手机号已关联姓名和账号，关联信息无法在新增上面进行更改！'
							}else{
								return callback(new Error('此手机号已被注册，请更换其他的手机号进行新增！'));
							}
						}else{
							this.forbidden = false;
							this.ruleFormOne.principalAccount = '';
							this.ruleFormOne.principalName = '';
							this.passwordTips = '* 账号密码为admin@123，请负责人登录账户并及时修改密码防止密码泄露';
						}
					}
				})
			}
		};
		var validateAccount = (rule, value, callback) => {
			if (!value) {
				return callback(new Error('负责人账户不能为空！'));
			}else if(!(/^[a-zA-Z][a-zA-Z0-9]{3,15}$/.test(value))){
				return callback(new Error('账户格式设置有误，仅限填写大小写和数字，且不能以数字开头哦，请重填！'));
			}else{
				let params = {};
				if(this.options.level === '10'){
					params.principalAccount = this.ruleFormOne.principalAccount;
				}else{
					params.principalAccount = this.ruleFormTwo.staffAccount;
				}
				this.$houseAxios.post('/housekeeping/Branch/selectExistBranch',params).then(res => {
					console.log(params);
					console.log(res);
					if(res.data.code === 1000){
						if(res.data.data === false){
							return callback(new Error('此账号名已存在，请更改为其他的账户名！'))
						}else{
							let params = {};
							if(this.options.level === '10'){
								params.staffAccount = this.ruleFormOne.principalAccount;
							}else{
								params.staffAccount = this.ruleFormTwo.staffAccount;
							}
							this.$houseAxios.post('/housekeeping/Subordinate/selectSubordinateExist',params).then(res => {
								console.log(res);
								if(res.data.code === 1000){
									if(res.data.data === false){
										return callback(new Error('此账号名已存在，请更改为其他的账户名！'))
									}
								}
							})
						}
					}
				})
			}
		};
		var validateStoreName = (rule, value, callback) => {
			if(this.options.type === 'add'){
				this.$houseAxios.post('/housekeeping/Branch/selectPrincipalPhone',{'branchName':this.ruleFormOne.branchName}).then(res => {
					console.log(res);	
					if(res.data.code === 1000){
						if(res.data.data.branchName != undefined){
							return callback(new Error('此门店名称已存在，请更换另外一个门店名称！'));
						}
					}
				})	
			}
		} 
		return{
			evalDialog:false,
			level:'0',
			isClear:false,				//是否清空选择门店区域
			forbidden: false,			//当新增门店的时候该负责人有账户固定该已有账户
			passwordTips:'* 账号密码为admin@123，请负责人登录账户并及时修改密码防止密码泄露',
			ruleFormOne: {
				branchName: '',			//线下门店名称
				principalName: '',		//负责人姓名
				principalPhone: '',		//负责人电话
				county:'',				//所在区
				citys:[],				//所在地
				province:'',			//所在省
				city:'',				//所在市
				adress:'',				//网点详细地址
				principalAccount:'',	//设置负责人账户
				assessment:[],			//负责人权限
				reset:false				//是否清空所在地选择器里面的数据
			},
			ruleFormTwo:{
				staffName: '',			//新增的操作员姓名
				staffPhone: '',			//新增操作员手机号
				staffAccount: ''		//新增操作员账号
			},
			rulesOne: {
				branchName: [
					{ required: true, message: '请输入线下门店名称', trigger: 'blur'},
					{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'},
					{ required: true,validator: validateStoreName, trigger: 'blur'}
				],
				principalName:[
					{ required: true, message: '请输入负责人姓名', trigger: 'blur'},
					{ min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur'}
				],
				principalPhone:[
					{ required: true,validator: validateTel, trigger: 'blur' }
				],
				region:[
					{ required: true, message: '请选择门店区域', trigger: 'blur'},
				],
				adress:[
					{ required: true, message: '请输入门店具体地址', trigger: 'blur'},
					{ min: 3, max: 12, message: '长度在 3 到 20 个字符', trigger: 'blur'}
				],
				principalAccount:[
					{ required: true, validator: validateAccount, trigger: 'blur' }
				]
			},
			rulesTwo:{
				staffName:[
					{ required: true, message: '请输入负责人姓名', trigger: 'blur'},
					{ min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur'}
				],
				staffPhone:[
					{ required: true,validator: validateTel, trigger: 'blur' }
				],
				staffAccount:[
					{ required: true, validator: validateAccount, trigger: 'blur' }
				]
			},
			checkboxList:[
				{label:1,jobName:'母婴护理(月嫂)'},
				{label:2,jobName:'育婴师'},
				{label:3,jobName:'保姆'},
				{label:4,jobName:'养老护理'},
				{label:5,jobName:'钟点工'},
				{label:6,jobName:'护工'},
				{label:7,jobName:'催乳师'},
				{label:8,jobName:'产后康复师'},
				{label:9,jobName:'母乳喂养指导师'},
				{label:10,jobName:'其他家政职位'}
			],
		}
	},
	methods:{
		open(){
			this.evalDialog = true;
		},
		close(){
			this.evalDialog = false;
		},
		submsg(){
			let params = this.options.level === '10'?this.ruleFormOne:this.ruleFormTwo;
			this.$emit(this.options.eventName,params);
			this.ruleFormOne.branchName = '';
			this.ruleFormOne.principalName = '';
			this.ruleFormOne.principalPhone = '';
			this.ruleFormOne.adress = '';
			this.ruleFormOne.principalAccount = '';
			this.ruleFormOne.assessment = [];
			this.ruleFormOne.reset = true;
			this.forbidden = false;
			this.isClear = true;
			this.passwordTips = '* 账号密码为admin@123，请负责人登录账户并及时修改密码防止密码泄露';
			this.ruleFormTwo = {
				staffName: '',			//新增的操作员姓名
				staffPhone: '',			//新增操作员手机号
				staffAccount: ''		//新增操作员账号
			};
		},
		// 选择城市
		handleCityChange (val) {
			// console.log(val)
			this.ruleFormOne.citys = val;
			this.cityConvert(val);
		},
		//城市转换,将城市编号转换为城市名
		cityConvert(val){
			let citys = cityData.city;
			citys.forEach(item => {
				if(item.code === val[0]){
					this.ruleFormOne.province = item.name;
					item.subLevelModelList.forEach(item1 => {
						if(item1.code === val[1]){
							this.ruleFormOne.city = item1.name;
							item1.subLevelModelList.forEach(item2 => {
								if(item2.code === val[2]){
									this.ruleFormOne.county = item2.name;
								}
							})
						}
					})
				}
			})
		}
	},
	
}
</script>

<style scoped="scoped">
.evalDialog{
	min-height: 700px;
}
.evalDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.evalDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}
.demo-ruleForm{
	margin: 20px 50px;overflow: hidden;
}
.demo-ruleForm__tips{
	font-size: 12px;color: red;margin-top: 18px;
}
.demo-ruleForm__checkbox{
	margin-top: 30px;
}
.form-sub{
	text-align: center;
	padding: 50px 0;
}
.ruleForm-area{
	
}
</style>
